<template>
  <el-card class="box-card" shadow="hover">
    <div v-for="(l, index) in layers" :key="index" class="text item">
      <el-checkbox
        v-model="l.checked"
        :label="l.name"
        @change="onchange(l)"
        border
      ></el-checkbox>
    </div>
  </el-card>
  <!-- <div>
  </div> -->
</template>

<script>
export default {
  components: {},
  props: {
    viewer: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      layers: [
        {
          checked: false,
          name: "bishe:elev自定义名字",
          layers: "bishe:elev",
          url: "/geoserver/bishe/wms", // 完整地址是http://47.115.201.167:8081/geoserver/bishe/wms，这里配置了跨域代理
          bbox: [
            108.65510302492544, 36.3438106987301, 110.49164990932633,
            37.32156795213621,
          ],
        },
        {
          checked: false,
          name: "图层名",
          layers: "bishe:elev",
          url: "",
          bbox: [
            108.65510302492544, 36.3438106987301, 110.49164990932633,
            37.32156795213621,
          ],
        },
      ],
      layersAdd: [],
    };
  },
  mounted(){
  },
  methods: {
    onchange(value) {
      if (!value) return;
      console.log(value);
      const { checked, name, layers, url, bbox } = value;
      const item = this.layersAdd.find((l) => l.name === name);
      if (checked) {
        if (item) {
          item.layer.show = true;
        } else {
          const provider = new Cesium.WebMapServiceImageryProvider({
            name,
            url,
            layers,
            rectangle: Cesium.Rectangle.fromDegrees(
              bbox[0],
              bbox[1],
              bbox[2],
              bbox[3]
            ),
            parameters: {
              service: "WMS",
              format: "image/png",
              transparent: true,
            },
          });
          // 加载WMS服务到viewer
          const layer = this.viewer.imageryLayers.addImageryProvider(provider);
          // 飞入动画
          this.viewer.flyTo(layer, {
            duration: 2,
          });

          this.layersAdd = [...this.layersAdd, { name: value.name, layer }];
        }
      } else {
        if (item) {
          item.layer.show = false;
        }
      }
    },
  },
};
</script>
<style lang="less">
.box-card {
  position: fixed;
  top: 120px;
  left: 50px;
  z-index: 1111;
  width: 300px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 8px 0;
}
</style>